<template>
    <div class="shopping">

        
        <table border="1" cellspacing="0">
            <tbody>
                <!-- 添加商品 -->
                <tr>

                    <th colspan="2">名称：<input type="text" v-model="name"></th>
                    <th colspan="2">价格：<input type="text" v-model="price"></th>
                    <th>
                        <button @click="addGoods()">添加</button>
                    </th>
                </tr>
                <tr>
                    <th>
                        全选<input type="checkbox" v-model="allChecked" @input="all">
                    </th>
                    <th>商品名称</th>
                    <th>商品单价</th>
                    <th>购买数量</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(item) in listData.list">
                    <td>
                        <input type="checkbox" v-model="item.have">
                    </td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.price }}</td>
                    <td>
                        <button @click="reduceAmount(item.id)">-</button>
                        <div class="amount-box">{{ item.amount }}</div>
                        <button @click="addAmount(item.id)">+</button>
                    </td>
                    <td>
                        <button @click="deleteGoods(item.id)">删除</button>
                    </td>
                </tr>
                <tr>
                    <th colspan="5">购买数量为：{{ TotalNum }} 总价为：{{ TotalAmount }}</th>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang='ts' name="ShoppingCart">
import { ref, reactive, computed, watch, watchEffect } from 'vue'
import { type GoodsList, type Goods } from '@/types/ShoppingCart';
import { nanoid } from 'nanoid/non-secure';
nanoid
let name = ref("");
let price = ref();
function addGoods() {
let newGoods = {
    id:nanoid(),
    name:name.value,
    price:price.value,
    amount:0,
    have:false
}
listData.list.push(newGoods)
}

let allChecked = ref(false)
let allChecked2 = false
let listData = reactive({
    list: [
        {
            id: "0",
            name: "iPhone 7",
            price: 6188,
            amount: 0,
            have: false,
        },
        {
            id: "1",
            name: "三星999",
            price: 8765,
            amount: 0,
            have: false,
        },
        {
            id: "2",
            name: "华为Pro11",
            price: 3999,
            amount: 0,
            have: false,
        },
        {
            id: "3",
            name: "华为荣耀",
            price: 5599,
            amount: 0,
            have: false,
        },
    ]
})

let TotalNum = computed(() => {
    let s = 0;
    for (let i in listData.list) {

        if (listData.list[i].have)
            s += listData.list[i].amount;
    }

    return s;
})
let TotalAmount = computed(() => {
    let s = 0;
    for (let i of listData.list) {

        if (i.have)
            s += i.amount * i.price;
    }

    return s;
})
function all(e: any) {
    console.log(e.target.value);
    allChecked2 = !allChecked2
    if (allChecked2) {
        for (let i of listData.list) {
            i.have = true
        }
    } else {
        for (let i of listData.list) {
            i.have = false
        }
    }

}
watch(allChecked, (newVal) => {
    allChecked2 = newVal
})
watchEffect(() => {
    let s = true
    for (let i of listData.list) {
        if (i.have === false)
            s = false
    }
    if(listData.list.length === 0){
        s = false
    }
    allChecked.value = s
    // if(s){
    //     allChecked.value = s
    // }else{
    //     let lie = listData.list;
    //     // allChecked = v
    // }


})

function getGoodsById(id: string) {
    for (let i of listData.list) {
        if (i.id === id) {
            return i
        }
    }

}
function reduceAmount(id: string) {
    let item = getGoodsById(id)

    if (item != null) {
        item.amount--;
    }
}
function addAmount(id: string) {
    let item = getGoodsById(id)

    if (item != null) {
        item.amount++;
    }
}
function deleteGoods(id: string) {

    // 相关文章：https://blog.csdn.net/weixin_69450730/article/details/144220457?fromshare=blogdetail&sharetype=blogdetail&sharerId=144220457&sharerefer=PC&sharesource=m0_74802991&sharefrom=from_link
    listData.list = listData.list.filter((item) => {
        return !(item.id === id)
    })


}
</script>

<style lang='scss' scoped>
.shopping{
    table td{
        text-align: center;
    }
    .amount-box{
        display: inline-block;
        width: 30px;
        text-align: center;
    }
}
</style>